<template>
	<view class="detail">
		<view class="c_pannel">
			<view class="top">
				<view class="user">
					<image class="avatar" :src="detail.avatar"></image>
					<text>{{ detail.nickname }}</text>
				</view>
				<view class="time">{{ detail.create_time }}</view>
			</view>
			<view class="content">{{ detail.content }}</view>
			<view class="bottom">
				<view class="block">
					<image src="../../../static/chat_c.png" mode="widthFix"></image>
					<text>({{ detail.comment_count }})</text>
				</view>
				<view class="block" @tap="dianzan(detail.id, detail.hasmember == 0 ? 1 : 0, -1)">
					<image v-if="detail.hasmember == 0" src="../../../static/love.png" mode="widthFix"></image>
					<image v-else src="../../../static/love_ed.png" mode="widthFix"></image>
					<text>({{ detail.start_count }})</text>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="list">
			<view class="pannel" v-for="(item, index) in child" :key="index">
				<view class="left"><image :src="item.avatar"></image></view>
				<view class="right">
					<view class="top">
						<text class="name">{{ item.nickname }}</text>
						<view class="block" @tap="dianzan(item.id, item.hasmember == 0 ? 1 : 0, index)">
							<image v-if="item.hasmember == 0" src="../../../static/love.png" mode="widthFix"></image>
							<image v-else src="../../../static/love_ed.png" mode="widthFix"></image>
							<text>({{ item.start_count }})</text>
						</view>
					</view>
					<view class="content">{{ item.content }}</view>
				</view>
			</view>
		</view>
		<view class="bottom_footer">
			<view class="left"><input type="text" @input="inputValue" placeholder="留下您的精彩评论吧!" /></view>
			<view class="right" @click="submit"><text>发送</text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: null,
			detail: {},
			child: [],
			value: ''
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.getData();
	},
	methods: {
		async getData() {
			let $res = await this.$request.post('/landed/getCommentInfo', {
				data: {
					comment_id: this.id
				}
			});
			this.detail = $res.data.data.list;
			this.child = this.detail.child;
		},
		inputValue(e) {
			this.value = e.detail.value;
		},
		async submit() {
			let authData = uni.getStorageSync('authData');
			if (!authData.auth) {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 2000);
				return false;
			}
			if (!this.value) {
				uni.showToast({
					title: '评论内容不能为空',
					icon: 'none',
					duration: 2000
				});
				return true;
			}
			let $res = await this.$request.post('/landed/addComment', {
				data: {
					content: this.value,
					pid: this.id
				}
			});
			uni.showToast({
				title: '评论成功。',
				icon: 'none',
				duration: 2000
			});
			this.value = '';
			this.getData();
		},
		async dianzan(id, is_start, index) {
			let authData = uni.getStorageSync('authData');
			if (!authData) {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 2000);
				return false;
			}
			let $res = await this.$request.post('/landed/addStart', {
				data: {
					comment_id: id,
					is_start: is_start
				}
			});
			let list = this.child;
			if(index == -1){
				this.detail['hasmember'] = is_start;
				this.detail['start_count'] += is_start == 1 ? 1 : -1;
			}else{
				list[index]['hasmember'] = is_start;
				list[index]['start_count'] += is_start == 1 ? 1 : -1;
			}
			
			this.list = list;
		}
	}
};
</script>

<style lang="scss">
.detail {
	width: 100%;
	padding-bottom: 130upx;
}
.line {
	width: 100%;
	height: 20upx;
	background-color: #d9d9d9;
}
.c_pannel {
	width: 100%;
	box-sizing: border-box;
	padding: 30upx;
	background-color: #ffffff;
	.top {
		width: 100%;
		height: 80upx;
		font-size: $uni-font-size-base;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;
		.user {
			width: 300upx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.avatar {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
			text {
				margin-left: 20upx;
			}
		}
	}
	.content {
		padding: 10upx 0;
		width: 100%;
		line-height: 1.5em;
		font-size: $uni-font-size-base;
		color: #333;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		lines: 2;
	}
	.bottom {
		width: 100%;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.block {
			width: 120upx;
			height: 60upx;
			color: #333;
			font-size: $uni-font-size-base;
			line-height: 60upx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			image {
				width: 40upx;
				height: 40upx;
			}
		}
	}
}

.list {
	width: 100%;
	box-sizing: border-box;
	padding: 20upx;
	.pannel {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 20upx 0;
		.left {
			width: 150upx;
			min-height: 150upx;
			image {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.right {
			width: calc(100% - 150upx);
			height: 100%;
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: $uni-font-size-base;
				height: 50upx;
				.block {
					width: 120upx;
					height: 60upx;
					color: #333;
					font-size: $uni-font-size-base;
					line-height: 60upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					image {
						width: 40upx;
						height: 40upx;
					}
				}
			}
			.content {
				color: #333;
				font-size: $uni-font-size-base;
			}
		}
	}
}

.bottom_footer {
	width: 100%;
	height: 100upx;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: #FFFFFF;
	border-top: 2upx solid #d9d9d9;
	.left {
		width: calc(100% - 150upx);
		height: 100%;
		display: flex;
		align-items: center;
		input {
			font-size: $uni-font-size-base;
			width: 100%;
			box-sizing: border-box;
			padding-left: 30upx;
		}
	}
	.right {
		width: 150upx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
		color: red;
		text {
			height: 60upx;
			width: 100%;
			box-sizing: border-box;
			border-left: 2upx solid #d9d9d9;
			text-align: center;
			line-height: 60upx;
		}
	}
}
</style>
